<template>
  <div>
    <Drawer
      ref="modal"
      :title="`${editType === 'create' ? $t('areaIndex.areaAddBtn') : $t('areaIndex.areaAddBtnEdit')}`"
      width="70%"
      :value="show"
      :beforeClose="$_modal_decideIfClose"
    >
      <Form
        ref="form"
        :labelWidth="100"
        :model="formData"
        :rules="formRule"
      >
        <FormItem prop="areaName" :label="$t('areaIndex.areaAddBtnName')">
          <Input v-model="formData.areaName" :placeholder="$t('areaIndex.areaAddBtnNameInput')" />
        </FormItem>
        <FormItem prop="mids" :label="$t('areaIndex.areaAddBindMan')">
          <PeopleSelect
            v-model="formData.mids"
          />
        </FormItem>
        <FormItem class="glo-btn-group">
          <Button
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >{{ $t("devicesCreate.devCreateSubmit") }}</Button>
          <Button
            @click="$_modal_close"
          >{{ $t("devicesCreate.devCreateCancel") }}</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import _ from 'lodash'
import {
  mapState,
} from 'vuex'

import modalMixin from '@/utils/mixins/modalMixin.js'
import {
  create,
  update,
  detail,
} from '@/api/area.js'
import PeopleSelect from '@/components/PeopleSelect'

const DEFAULT_FORM = {
  areaName: '',
  mids: [
    // { mid: 1, username: '陈一' },
    // { mid: 2, username: '陈二' },
    // { mid: 3, username: '陈三' },
  ],
}

export default {
  mixins: [
    modalMixin,
  ],
  components: {
    PeopleSelect,
  },

  props: {
    editType: {
      type: String,
      default: 'create',
    },
    editItem: Object,
  },
  data () {
    return {
      ifAdvanced: true,
      formData: _.cloneDeep(DEFAULT_FORM),
      formRule: {
        areaName: { required: true, message: this.$t('areaIndex.areaAddNameSure') },
      },
    }
  },
  computed: {
    ...mapState([
      'departId',
    ]),
  },

  mounted () {
    this.show = true
    if (this.editType === 'update') {
      this.getDetail(this.editItem.id)
    }
  },

  methods: {
    async handleSubmit () {
      const ifVlid = await this.$refs.form.validate()
      if (ifVlid && this.editType === 'create') {
        this.handleCreate()
      }
      if (ifVlid && this.editType === 'update') {
        this.handleUpdate()
      }
    },

    async getDetail (areaId) {
      const { success, data } = await detail({ areaId })
      if (success) {
        const netForm = data.data
        const formData = {}
        const keys = Object.keys(DEFAULT_FORM)
        keys.forEach(key => {
          formData[key] = _.isUndefined(netForm[key])
            ? DEFAULT_FORM[key]
            : netForm[key]
        })
        formData.id = netForm.id
        formData.mids = netForm.midList
        this.formData = _.cloneDeep(formData)
      }
    },
    async handleCreate () {
      const formData = _.cloneDeep(this.formData)
      // formData.departId = this.departId
      const { success } = await create(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateN'))
      }
    },
    async handleUpdate () {
      const formData = _.cloneDeep(this.formData)
      // formData.departId = this.departId
      const { success } = await update(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateUpdateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateUpdateN'))
      }
    },
  },
}
</script>
